<template>
    <el-drawer title="我是标题" :visible.sync="dialogVisible" :with-header="false" size='600px' class="demand_box" @close="resetForm('editDemandSzForm')">
        <div class="flexbox flexcolumn height_100">
            <div class="demand_head flexbox flexcenter flexbetween">
                <span class="demand_title">修改需求</span>
                <span class="icon_btn icon_btn_32"><img src="../../assets/img/close_check.svg" alt="" @click="resetForm('editDemandSzForm')"></span>
            </div>
            <div class="demand_center flex">
                <el-form label-position="top" style="margin-top:-10px" :model="editDemandSzForm" size="medium" :hide-required-asterisk='true' ref="editDemandSzForm" :rules="editDemandSzRules" class="dialog_form">
                    <el-form-item label="品牌/产品" prop="">
                        <el-row :gutter="12">
                            <el-col :span="12">
                                <el-form-item prop="brand_id">
                                    <el-select v-model="brandSelect" placeholder="请选择品牌" value-key='brand_id' style="width:100%" @change="selectBrand">
                                        <el-option :label="item.brand_name+filters.chanelName(item.channel)" :value="item" v-for="item in brandList" :key="item.brand_id">
                                            <span>{{item.brand_name}}{{filters.chanelName(item.channel)}}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="product_id">
                                    <el-select v-model="editDemandSzForm.product_id" placeholder="请选择产品" style="width:100%" :disabled="!editDemandSzForm.brand_id" @change="selectProduct">
                                        <el-option :label="item.name" :value="item.product_id" v-for="item in productList" :key="item.product_id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-row :gutter="12">
                        <el-col :span="12">
                            <el-form-item label="业务场景" prop="business_scene">
                                <el-select v-model="editDemandSzForm.business_scene" :disabled="!editDemandSzForm.product_id" placeholder="请选择业务场景" style="width:100%">
                                    <el-option :label="item.scene_name" :value="item.business_scene" v-for="item in sceneList" :key="item.business_scene"></el-option>
                                    <el-option label="短视频原创" :value="1" disabled></el-option>
                                    <el-option label="短视频混剪" :value="2" disabled></el-option>
                                    <el-option label="直播素材" :value="3" disabled></el-option>
                                    <el-option label="直播直投" :value="4" disabled></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="核心创意人" prop="centre_uid">
                                <el-select v-model="editDemandSzForm.centre_uid" placeholder="请选择核心创意人" style="width:100%">
                                    <el-option label="默认剪辑" :value="0">
                                    </el-option>
                                    <el-option :label="item.nickname" :value="item.id" v-for="item in centreList" :key="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="分配执行人" prop="executor_uid">
                        <template slot="label">
                            <div class="flexbox flexcenter flexbetween" style="width:550px">
                                <span>分配执行人</span>
                                <div class="flexbox flexcenter">
                                    <span class="feipei_text">随机分配</span>
                                    <el-switch v-model="editDemandSzForm.is_random" @change="changeRandom" :active-value="1" :inactive-value="0">
                                    </el-switch>
                                </div>
                            </div>
                        </template>
                        <el-select v-model="editDemandSzForm.executor_uid" :disabled="editDemandSzForm.is_random==1" multiple collapse-tags placeholder="请选择执行人" style="width:100%">
                            <el-option :label="item.nickname" :value="item.id" v-for="item in optimiList" :key="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="需求数量" prop="quantity">
                        <el-input-number class="quan_icon" style="width:90px" v-model="editDemandSzForm.quantity" controls-position="right" @change="handleChange" :min="1"></el-input-number>
                    </el-form-item>
                </el-form>
            </div>
            <div class="demand_footer flexbox flexcenter">
                <el-button plain size="small" class="el-button-width" @click="resetForm('editDemandSzForm')">取 消</el-button>
                <el-button type="primary" size="small" class="el-button-width" @click="submitForm('editDemandSzForm')" :loading="loading" :disabled='loading'>完成创建</el-button>
            </div>
        </div>
    </el-drawer>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            dialogVisible: false,
            brandSelect: {},
            brandList: [], //品牌列表
            productList: [], //产品列表
            sceneList: [], //业务场景列表
            optimiList: [], //优化师列表
            centreList:[],//核心创意人
            editDemandSzForm: {
                year: "",
                week: "",
                brand_id: "",
                product_id: "",
                channel: "",
                business_scene: "",
                is_random: 0,
                executor_uid: "",
                quantity: "",
                centre_uid:"",
            },
            editDemandSzRules: {
                brand_id: [
                    {
                        required: true,
                        message: "请选择品牌",
                        trigger: "blur",
                    },
                ],
                product_id: [
                    {
                        required: true,
                        message: "请选择产品",
                        trigger: "blur",
                    },
                ],
                business_scene: [
                    {
                        required: true,
                        message: "请选择业务场景",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    created() {
        this.$bus.on("editDemandSz", (value) => {
            console.log(value);
            this.dialogVisible = value.dialogVsb;
            this.brandSelect.brand_id = value.brand_id;
            this.brandSelect.brand_name = value.brand_name;
            this.brandSelect.channel = value.channel;
            this.editDemandSzForm.week = value.week;
            this.editDemandSzForm.year = value.year;
            this.editDemandSzForm.brand_id = value.brand_id;
            this.editDemandSzForm.product_id = value.product_id;
            this.editDemandSzForm.business_scene = value.business_scene;
            this.editDemandSzForm.channel = value.channel;
            this.editDemandSzForm.is_random = value.is_random;
            this.editDemandSzForm.executor_uid = value.executor_uid;
            this.editDemandSzForm.centre_uid = value.centre_uid;
            this.editDemandSzForm.quantity = value.quantity;
            this.editDemandSzForm.id = value.id;
            this.getBrandList();
            this.getProductList();
            this.getSceneList();
            this.getOptimization();
            this.getCentreList()
        });
    },
    beforeDestroy() {
        this.$bus.off("editDemandSz");
    },
    methods: {
        //获取品牌列表
        async getBrandList() {
            const { data: res } = await this.$http.post(
                "adminapi/project/brandList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.brandList = res.data;
            }
        },

        // 获取产品
        async getProductList() {
            const { data: res } = await this.$http.post(
                "adminapi/project/productList",
                {
                    brand_id: this.editDemandSzForm.brand_id,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.productList = res.data;
            }
        },

        // 获取业务场景
        async getSceneList() {
            const { data: res } = await this.$http.post(
                "adminapi/project/sceneList",
                {
                    brand_id: this.editDemandSzForm.brand_id,
                    product_id: this.editDemandSzForm.product_id,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.sceneList = res.data;
            }
        },

        // 获取优化师列表
        async getOptimization() {
            const { data: res } = await this.$http.post(
                "adminapi/company/szClipperList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.optimiList = res.data;
            }
        },

        // 获取核心创意人列表
        async getCentreList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/szCentreList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.centreList = res.data;
            }
        },

        //品牌选择
        selectBrand() {
            this.editDemandSzForm.brand_id = this.brandSelect.brand_id;
            this.editDemandSzForm.channel = this.brandSelect.channel;
            this.editDemandSzForm.product_id = "";
            this.editDemandSzForm.business_scene = "";
            this.getProductList();
        },

        // 产品选择
        selectProduct() {
            this.editDemandSzForm.business_scene = "";
            this.getSceneList();
        },

        changeRandom() {
            if (this.editDemandSzForm.is_random == 1) {
                this.editDemandSzForm.executor_uid = "";
            }
        },

        // 提交
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    this.loading = true;
                    const { data: res } = await this.$http.post(
                        "adminapi/demandsz/demandEdit",
                        this.editDemandSzForm
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        this.loading = false;
                        return;
                    } else {
                        this.$message({
                            message: "修改成功",
                            type: "success",
                        });
                        this.loading = false;
                        this.resetForm(formName);
                        this.$parent.getDataList(1);
                    }
                } else {
                    this.loading = false;
                    return false;
                }
            });
        },

        // 关闭重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.dialogVisible = false;
        },
    },
    components: {},
};
</script>

<style scoped>
.feipei_text {
    font-size: 14px;
    color: #17233d;
    margin-right: 12px;
}
</style>

<style>
.quan_icon .el-icon-arrow-down:before{
    content: "\E6DF" !important;
}
</style>


